<template>
  <div id="china_map_box">
    <div id="china_map"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "../util/china.js";
import {mapActions, mapGetters} from "vuex";

export default {
  name: "chinaMap",
  data() {
    return {
      //echart 配制option
      options: {
        tooltip: {
          triggerOn: "mousemove",   //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000000",
            fontSize: 13
          },
          formatter: function (e) {
            let data = e.data;
            return `
               <div>
                   <p><b style="font-size:15px;">${data.name}</b></p>
                   <p class="tooltip_style"><span class="tooltip_left">罚单总数</span><span class="tooltip_right">${data.value}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">罚金总额</span><span class="tooltip_right">${data.fine}</span></p>

               </div>
            `;
          }
        },
        visualMap: {
          show: true,
          left: 26,
          bottom: 40,
          showLabel: true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b"
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce"
            },
            {
              gte: 100,
              lt: 499,
              label: "100 - 499",
              color: "#6f83db"
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7"
            },
            {
              lt: 10,
              label: "<10",
              color: "#bcc5ee"
            }
          ]
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "突发事件",
            type: "map",
            geoIndex: 0,
            data: []
          }
        ]
      },
      //echart data

    };
  },
  props: {
    years: {
      type: Number,
      default: 2021
    },
    month: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters([
      "dataList"
    ])
  },
  methods: {
    ...mapActions([
      "get_mapDataList"
    ]),
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById("china_map");
      let myChart = echarts.init(mapDiv);
      myChart.setOption(this.options);
    },
    //修改echart配制
    setEchartOption() {
      this.options.series[0]["data"] = this.dataList;
    },
    async updateMapData(filter) {
      console.log(filter)
      await this.get_mapDataList(filter);
      this.setEchartOption();
    }
  },
  created() {
    this.setEchartOption();
  },
  async mounted() {
    await this.get_mapDataList({"year": 2021, "month": 0});
    this.setEchartOption();
    this.initEchartMap();
  }
};


</script>

<style scoped>
#china_map_box {
  height: 100%;
  position: relative;
}

#china_map_box #china_map {
  height: 100%;
}

#china_map_box .china_map_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
}

#china_map .tooltip_style {
  line-height: 1.7;
  overflow: hidden;
}

#china_map .tooltip_left {
  float: left;
}

#china_map .tooltip_right {
  float: right;
}


</style>
